<template>
    <div class="monitor" v-if="open" @click.top="close" data-mask="mask">
        <div class="main">
            <div class="header">
                <div class="title">{{ monitorTitle }}</div>
                <div class="close" data-mask="mask" @click.top="close">x</div>
            </div>
<!--            <video-->
<!--                    class="myVideo"-->
<!--                    ref="myVideo"-->
<!--                    autoplay-->
<!--                    controls-->
<!--                    :src="video_url"-->
<!--            ></video>-->


            <video-play v-bind="options" class="myVideo">

            </video-play>
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue"

import { videoPlay } from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css'

export default {
    name: "monitor-popup",
    components:{
        videoPlay
    },
    setup(props, content){
        let monitorTitle = ref('测试标题')
        let open = ref(false)
        let video_url = ref('') //https://www.jxdkchy.com:30438/jeecg-boot/sys/common/static/ceshi.mp4

        let onshow = ({ title, videoUrl } = obj) => {
            monitorTitle.value = title
            data.options.src = videoUrl
            open.value = true
        }

        let close = ($event) => {
            if($event.srcElement.dataset.mask == 'mask'){
                open.value = false
            }
        }

        const data = reactive({
            options: {
                width: '100%', //播放器高度
                height: `calc(100% - 60px)`, //播放器高度
                color: "#409eff", //主题色
                muted: true, //静音
                webFullScreen: false,
                speedRate: ["1.0"], //播放倍速
                speed:false, //是否支持快进快退
                autoPlay: false, //自动播放
                loop: false, //循环播放
                mirror: false, //镜像画面
                ligthOff: false,  //关灯模式
                volume: 0.3, //默认音量大小
                control: true, //是否显示控制器
                title: "", //视频名称
                src: "", //视频源
                controlBtns:['audioTrack', 'fullScreen'],
                // poster: props.video_obj.poster, //封面
                type: 'm3u8', //视频类型
            }
        })

        return {
            monitorTitle,
            open,
            video_url,
            onshow,
            close,
            ...toRefs(data)
        }
    }
}
</script>

<style scoped lang="less">
.monitor{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  .main{
    width: 40%;
    height: 50%;
    background: url("/src/assets/dwgk/popup.png") center center no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 20px 10px;
    box-sizing: border-box;
    &::before{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      content: "";
      background: rgba(0, 0, 0, 0.7);
      background-size: 100% 100% !important;
      z-index: -1;
    }
    .header{
      width: 100%;
      height: 50px;
      background: linear-gradient(to right, rgba(6, 132, 143), rgba(6, 132, 143, 0));
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: baseline;
      color: #fff;
      padding: 0 20px;
      box-sizing: border-box;
      margin-bottom: 10px;
      font-size: 20px;
        .title{
            font-family: YouSheBiaoTiHei;
            font-size: 26px;
        }
      .close{
        font-size: 30px;
        cursor: pointer;
      }
    }
    .myVideo{
      width: 100%;
      height: calc(100% - 60px);
    }
  }
}
</style>
